<!-- 维修评价编辑弹窗 -->
<template>
  <div class="ele-body">
    <a-card :title="noticeModalApp.title" :bordered="false">
      <a-form
        ref="form2"
        :model="noticeModalApp.notice"
        :rules="noticeModalApp.rules"
        >
            <a-form-item label="通知标题:" name="title">
              <a-input
                v-model:value="noticeModalApp.notice.title"
                placeholder="请输入通知标题"
                :maxlength="255"
                allow-clear
              />
            </a-form-item>
            <a-form-item label="通知内容:" name="content">
              <rich-edit   @change="(html) => { noticeModalApp.notice.content = html }" :html="noticeModalApp.notice.content"/>
            </a-form-item>
            <a-form-item label="通知类型:" name="noticeType" :disabled="noticeListApp.editModalForEdit">
              <m-dict-select
                :disabled="noticeListApp.editModalForEdit"
                v-model:value="noticeModalApp.notice.noticeType"
                placeholder="请选择通知类型"
                dict="通知类型"/>
            </a-form-item>
            <a-form-item v-if="noticeModalApp.notice.noticeType=='角色'" label="角色:" name="checkedIds">
              <m-entity-select style="width: 200px" show-options-name="roleName"
                               get-value="roleId"
                               system="1"
                               module="sys"
                               :disabled="noticeListApp.editModalForEdit"
                               entity="role"
                               mode="multiple"
                               v-model:value="noticeModalApp.notice.checkedIds"
              ></m-entity-select>
            </a-form-item>

        <a-form-item v-if="noticeModalApp.notice.noticeType=='部分'" label="用户:" name="checkedIds" >
          <m-entity-select style="width: 200px"
                           show-options-name="nickname"
                           system="1"
                           :disabled="noticeListApp.editModalForEdit"
                           module="sys"
                           entity="user"
                           mode="multiple"
                           v-model:value="noticeModalApp.notice.checkedIds"
          ></m-entity-select>
        </a-form-item>

            <a-form-item label="是否发布:" name="pulish" :disabled="noticeListApp.editModalForEdit">
              <a-select
                ref="select"
                style="width: 180px"
                :disabled="noticeListApp.editModalForEdit"
                v-model:value="noticeModalApp.notice.pulish"
              >
                <a-select-option :value=0 >是</a-select-option>
                <a-select-option :value=1 >否</a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
              <!--class="ele-pull-right"-->
              <div v-if="noticeModalApp.display">
                <teleport to="#noticeEditModalFooter">
                  <div>
                    <a-space size="middle">
                      <a-button @click="noticeListApp.editModalShowing=false">取消
                      </a-button>
                      <a-button
                        type="primary"
                        @click="onSubmit(noticeModalApp.notice)"
                        :loading="loading">提交
                      </a-button>
                      <!--<a-button v-if="!eid"
                                type="dashed"
                                @click="continueSubmit"
                                :loading="loading">继续提交
                      </a-button>-->
                    </a-space>
                  </div>
                </teleport>
              </div>
              <div v-if="!noticeModalApp.display">
                <a-space size="middle">
                  <a-button @click="onBack()">返回列表</a-button>
                  <a-button
                    type="primary"
                    @click="onSubmit(noticeModalApp.notice)"
                    :loading="loading">提交
                  </a-button>
                  <!--<a-button v-if="!eid"
                            type="dashed"
                            @click="continueSubmit"
                            :loading="loading">继续提交
                  </a-button>-->
                </a-space>
              </div>

            </a-form-item>
      </a-form>
    </a-card>

  </div>

</template>

<script>
import {defineComponent, inject, reactive, onMounted} from 'vue'
import {useRoute, useRouter} from "vue-router"
import {NoticeService} from "@/views/repair/repairManagement/notice/noticeService";
import {VXETable} from 'vxe-table'
import {useStore} from "vuex";
import regions from 'ele-admin-pro/packages/regions.js';


import MDictSelect from "@/components/MDict/dictSelect";
import RichEdit from "@/components/RichEdit/RichEdit";
import MEntitySelect from "@/components/MEntity/entitySelect";

export default defineComponent({
  components: {
    MEntitySelect,
    RichEdit,
    MDictSelect,
  },
  setup() {
    // 省市区数据
    const cityData = regions
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    let routeId = route.params.id;
    let noticeListApp = inject('noticeListApp', reactive({}));
    let noticeGrid = inject('noticeGrid', reactive({}))
    const noticeModalApp = reactive({
      id: null,
      notice: {},
      isEdit: false,
      display: false
    });
    noticeModalApp.rules = {
      title: [
        {
          required: false,
          type: 'string',
          message: '请输入通知标题',
          trigger: 'blur'
        }
      ],
      content: [
        {
          required: true,
          type: 'string',
          message: '请输入通知内容',
          trigger: 'blur'
        }
      ],
      noticeType: [
        {
          required: true,
          type: 'string',
          message: '请输入通知类型',
          trigger: 'blur'
        }
      ],
      pulish: [
        {
          required: false,
          type: 'string',
          message: '请输入是否发布',
          trigger: 'blur'
        }
      ],
    }

    onMounted(() => {
      //清理数据
      noticeModalApp.notice = reactive({});
      if (routeId) {//路由
        noticeModalApp.id = routeId;
        noticeModalApp.display = false;
        findNotice(noticeModalApp.id);
      } else if (noticeListApp.editModalForEdit) {//修改弹窗
        noticeModalApp.id = noticeListApp.currentId;
        noticeModalApp.display = true;
      } else if (!noticeListApp.editModalForEdit && noticeListApp.addModalForEdit) {//新增弹窗
        noticeModalApp.display = true;
      } else {
        noticeModalApp.title = "新增";
      }
      if (noticeModalApp.id) findNotice(noticeModalApp.id);
    })

    const findNotice = (id) => {
      NoticeService.findNoticeForView(id).then((res) => {
        noticeModalApp.notice = res.data;
        // console.log(res.data.selectedString.split(","),noticeListApp)
        if(res.data.selectedString){
          let arr=[];
          res.data.selectedString.split(",").forEach(item=>{
            arr.push(Number(item));
          })
          noticeModalApp.notice.checkedIds=arr;
        }
      }).catch(error => {
        VXETable.modal.message({content: `查找出错，原因是：${error.message}`, status: 'error'});
      })
    }

    /*TODO:提交 新增&编辑*/
    const onSubmit = (data) => {
      // debugger;
      //当为数组时用逗号连接
      // console.log(data)
      // data=Object.assign({},data);
      if(Array.isArray(data.checkedIds)){
        data.selectedString=data.checkedIds.join(",")
      }
      if (data.eid) {
        //修改
        NoticeService.updateNotice(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      } else {
        //新增
        NoticeService.saveNotice(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      }
    }

    /*TODO:继续提交*/
    const continueSubmit = () => {
      VXETable.modal.message({content: 'error 提示', status: 'error'});
    }

    /*TODO:返回列表*/
    const onBack = () => {
      router.push(`/repair/repairManagement/notice`);
      store.dispatch('user/tabRemove', route.fullPath);
      setTimeout(() => {
        noticeGrid.value.commitProxy("query");
      }, 1500);
      noticeListApp.editModalShowing = false;
    }



    return {
      cityData,
      routeId,
      noticeListApp,
      noticeModalApp,
      onSubmit,
      continueSubmit,
      onBack,
    }

  },
})
</script>

<style scoped>

</style>
